<!DOCTYPE html>
<html>
<head>
  <title>FIGlet Example</title>
</head>
<body>
<div>
  <label for="font">Font:</label>
  <select id="font">
    <option value="3D Diagonal">3D Diagonal</option>
    <option value="Dancing Font">Dancing Font</option>
    <option value="Ghost">Ghost</option>
    <option value="Graffiti">Graffiti</option>
    <option value="Patorjk's Cheese">Patorjk's Cheese</option>
    <option value="Standard" selected>Standard</option>
    <option value="Pagga">Pagga</option>
    <option value="Pawp">Pawp</option>
    <option value="ASCII 12">ASCII 12</option>
    <option value="ASCII 9">ASCII 9</option>
    <option value="Big ASCII 12">Big ASCII 12</option>
    <option value="Big ASCII 9">Big ASCII 9</option>
    <option value="Big Mono 12">Big Mono 12</option>
    <option value="Big Mono 9">Big Mono 9</option>
    <option value="Circle">Circle</option>
    <option value="Emboss">Emboss</option>
    <option value="Emboss 2">Emboss 2</option>
    <option value="Future">Future</option>
    <option value="Letter">Letter</option>
    <option value="Mono 12">Mono 12</option>
    <option value="Mono 9">Mono 9</option>
    <option value="Small ASCII 12">Small ASCII 12</option>
    <option value="Small ASCII 9">Small ASCII 9</option>
    <option value="Small Block">Small Block</option>
    <option value="Small Braille">Small Braille</option>
    <option value="Small Mono 12">Small Mono 12</option>
    <option value="Small Mono 9">Small Mono 9</option>
    <option value="Upside Down Text">Upside Down Text</option>
  </select>
</div>

<div>
  <label for="hLayout">Horizontal Layout:</label>
  <select id="hLayout">
    <option value="default" selected>Default</option>
    <option value="full">Full</option>
    <option value="fitted">Fitted</option>
    <option value="controlled smushing">Controlled Smushing</option>
    <option value="universal smushing">Universal Smushing</option>
  </select>
</div>

<div>
  <label for="vLayout">Vertical Layout:</label>
  <select id="vLayout">
    <option value="default" selected>Default</option>
    <option value="full">Full</option>
    <option value="fitted">Fitted</option>
    <option value="controlled smushing">Controlled Smushing</option>
    <option value="universal smushing">Universal Smushing</option>
  </select>
</div>

<div>
  <label for="width">Width:</label>
  <select id="width">
    <option value="none">none</option>
    <option value="40" selected>40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="80">80</option>
    <option value="81">81</option>
    <option value="100">100</option>
  </select>
</div>

<div>
  <label for="whitespaceBreak">Break on Whitespace (if width set):</label>
  <select id="whitespaceBreak">
    <option value="false">false</option>
    <option value="true" selected>true</option>
  </select>
</div>

<div>
  <label for="inputText">Input:</label>
</div>
<textarea id="inputText" style="height: 100px; width: 200px">
test
123</textarea
>
<p></p>
<div>
  <label for="outputFigDisplay">Output</label>
</div>

<div id="outputFigDisplay"></div>

<!--
  Typically you're going to just do:

  import figlet from "figlet"

  you're not going to directly link to the file like I'm doing here.
-->

<script type="module">
  import figlet from '../../dist/figlet.mjs';

  if (window.location.protocol === "file:") {
    alert("fetch APi does not support file: protocol.");
  }

  figlet.defaults({
    fontPath: "../../fonts",
  });

  figlet.preloadFonts(["Standard", "Ghost", "Dancing Font", "3D Diagonal"], function (err, fonts) {
    if (err) {
      console.error("There was an error prefetching fonts: ", err);
    }
    console.log("prefetching done.");
  });

  /*
    Generates the output
  */
  let update = function () {
    let fontName = document.querySelector("#font option:checked").value,
      inputText = document.querySelector("#inputText").value,
      vLayout = document.querySelector("#vLayout option:checked").value,
      hLayout = document.querySelector("#hLayout option:checked").value,
      width = document.querySelector("#width option:checked").value,
      whitespaceBreak = document.querySelector(
        "#whitespaceBreak option:checked"
      ).value;

    /*
        How to use the text output.

        The below call could also have been: figlet.text(...
    */
    figlet(
      inputText,
      {
        font: fontName,
        horizontalLayout: hLayout,
        verticalLayout: vLayout,
        width: width === "none" ? undefined : width,
        whitespaceBreak:
          width === "none"
            ? undefined
            : whitespaceBreak === "true"
              ? true
              : false,
      },
      function (err, text) {
        if (err) {
          console.log("something went wrong...");
          console.dir(err);
          return;
        }
        document.querySelector("#outputFigDisplay").innerHTML =
          "<pre>" + text + "</pre>";
      }
    );

    /*
    How to read the metadata for a font
*/
    /*
figlet.metadata(fontName, function(err, options, headerComment) {
    if (err) {
        console.log('something went wrong...');
        console.dir(err);
        return;
    }
    console.dir(options);
    console.log(headerComment);
});
*/
  };

  /*
    GUI Controls
  */

  document.querySelector("#hLayout").addEventListener("change", update);
  document.querySelector("#vLayout").addEventListener("change", update);
  document.querySelector("#font").addEventListener("change", update);
  document.querySelector("#inputText").addEventListener("keyup", update);
  document.querySelector("#width").addEventListener("change", update);
  document
    .querySelector("#whitespaceBreak")
    .addEventListener("change", update);

  update(); // init
</script>
</body>
</html>
